<script id="drag_and_dropTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">普通拖放</h5>
                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
                    <div class="w-100 mb-3" id="generalDropTarget">目标区域</div>
                    <div class="theme-m-bg" id="generalDragDrop"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">指定区域拖放</h5>
                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
                    <div class="row w-100 mb-3" id="areaDropTarget">
                        <div class="col-4">
                            <div id="areaLeft">左目标区域</div>
                        </div>
                        <div class="col-4">
                            <div id="areaCenter">非目标区域</div>
                        </div>
                        <div class="col-4">
                            <div id="areaRight">右目标区域</div>
                        </div>
                    </div>
                    <div class="theme-m-bg" id="areaDragDrop"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">限定范围拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="border w-100 d-flex justify-content-center align-items-center" id="rangeDragDrop">
                        <div class="theme-m-bg" id="containerDragDrop"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">水平拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="theme-m-bg" id="horizontalDragDrop"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">垂直拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="theme-m-bg" id="verticalDragDrop"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">偏移拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="theme-m-bg" id="offsetDragDrop"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">自动滚动拖放</h5>
                <div class="card-body" id="wrapperDragDrop">
                    <div class="p-5" id="outsideDragDrop">
                        <div class="theme-m-bg" id="scrollDragDrop"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">指定元素拖放</h5>
                <div class="card-body d-flex justify-content-around align-items-center flex-wrap" id="filterDragDrop">
                    <div class="canDragDrop theme-m-bg"></div>
                    <div class="notDragDrop theme-s-bg"></div>
                    <div class="canDragDrop theme-m-bg"></div>
                    <div class="notDragDrop theme-s-bg"></div>
                    <div class="canDragDrop theme-m-bg"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">忽略元素拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="d-flex justify-content-center align-items-center theme-m-bg" id="ignoreDragDrop">
                        <div class="theme-s-bg" id="insideDragDrop"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">分组拖放</h5>
                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
                    <div class="row w-100 mb-3">
                        <div class="col-6">
                            <div class="theme-m-box" id="groupDropTargetLeft">左分组目标区域</div>
                        </div>
                        <div class="col-6">
                            <div class="theme-s-box" id="groupDropTargetRight">右分组目标区域</div>
                        </div>
                    </div>
                    <div class="row w-100">
                        <div class="col-6 d-flex justify-content-around align-items-center">
                            <div class="groupDragDropLeft theme-m-bg"></div>
                            <div class="groupDragDropRight theme-s-bg"></div>
                        </div>
                        <div class="col-6 d-flex justify-content-around align-items-center">
                            <div class="groupDragDropLeft theme-m-bg"></div>
                            <div class="groupDragDropRight theme-s-bg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">区域分组拖放</h5>
                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
                    <div class="row w-100 mb-3">
                        <div class="col-6" id="areaGroupDropTargetLeft">
                            <div class="theme-m-box mb-3" id="areaGroupDropTargetLeftTop">左分组上目标区域</div>
                            <div class="theme-m-box mb-3" id="areaGroupDropTargetLeftMiddle">左分组非目标区域</div>
                            <div class="theme-m-box" id="areaGroupDropTargetLeftBottom">左分组下目标区域</div>
                        </div>
                        <div class="col-6" id="areaGroupDropTargetRight">
                            <div class="theme-s-box mb-3" id="areaGroupDropTargetRightTop">右分组上目标区域</div>
                            <div class="theme-s-box mb-3" id="areaGroupDropTargetRightMiddle">右分组非目标区域</div>
                            <div class="theme-s-box" id="areaGroupDropTargetRightBottom">右分组下目标区域</div>
                        </div>
                    </div>
                    <div class="row w-100">
                        <div class="col-6 d-flex justify-content-around align-items-center">
                            <div class="areaGroupDragDropLeft theme-m-bg"></div>
                            <div class="areaGroupDragDropRight theme-s-bg"></div>
                        </div>
                        <div class="col-6 d-flex justify-content-around align-items-center">
                            <div class="areaGroupDragDropLeft theme-m-bg"></div>
                            <div class="areaGroupDragDropRight theme-s-bg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card mb-3">
                <h5 class="card-header">移动端拖放</h5>
                <div class="card-body d-flex justify-content-center align-items-center">
                    <div class="theme-m-bg" id="mobileDragDrop"></div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        #generalDragDrop,
        #areaDragDrop,
        #containerDragDrop,
        #horizontalDragDrop,
        #verticalDragDrop,
        #offsetDragDrop,
        #scrollDragDrop,
        .canDragDrop,
        .notDragDrop,
        .groupDragDropLeft,
        .groupDragDropRight,
        .areaGroupDragDropLeft,
        .areaGroupDragDropRight {
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
            cursor: move;
        }
        #generalDropTarget,
        #areaLeft,
        #areaRight,
        #areaCenter,
        #groupDropTargetLeft,
        #groupDropTargetRight,
        #areaGroupDropTargetLeftTop,
        #areaGroupDropTargetLeftMiddle,
        #areaGroupDropTargetLeftBottom,
        #areaGroupDropTargetRightTop,
        #areaGroupDropTargetRightMiddle,
        #areaGroupDropTargetRightBottom {
            border: 2px dashed #ccc;
            padding: 3rem 1.5rem;
        }
        #rangeDragDrop {
            height: 181px;
        }
        #wrapperDragDrop,
        #filterDragDrop {
            width: 100%;
            height: 180px;
            overflow: auto;
        }
        #outsideDragDrop {
            width: 800px;
            height: 600px;
        }
        #ignoreDragDrop,
        #mobileDragDrop {
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 145px;
            height: 145px;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
            cursor: move;
        }
        #insideDragDrop {
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
            cursor: no-drop;
        }
        .notDragDrop {
            cursor: no-drop;
        }
    </style>
</script>